<template>
	<view class="detail">
		<view class="nav">
			<uni-nav-bar backgroundColor="transparent" left-icon="left" @clickLeft="goback">
				<block slot="left">
					<image src="/static/technician/radio_close.png" style="width: 68rpx;height: 68rpx;"></image>
				</block>
			</uni-nav-bar>
		</view>
		<view class="player">
			<view class="player_icon">
				<image src="/static/technician/radio_icon.png"></image>
			</view>
			<view class="player_icon">
				<image src="/static/technician/radio_icon.png"></image>
			</view>
			<view class="text">
				{{timers(time)}}
			</view>
		</view>
		<view class="canvas flex_r_around">
			<view class="prompt-layer prompt-layer-1">
				<view class="prompt-loader">
					<view class="em" v-for="(item,index) in 15" :key="index"></view>
				</view>
			</view>
		</view>
		
		<view class="btn flex_c">
			<image src="/static/technician/radio_play.png" @click="stopRecord"></image>
			<text @click="stopRecord">结束服务</text>
		</view>
		
		<u-modal v-model="show" @confirm="confirm"
		ref="uModal" :async-close="true" title="服务完成" 
		content="为保证保证客户与技师的身体以及财务安全，录音将会上传"
		:show-cancel-button="true"
		:title-style="{
			'background':'#EAF2FE',
			color:'#2E7EFA',
			'font-weight':600,
			padding:'30rpx 0'
		}"
		:confirm-style="{
			'background':'#EAF2FE',
		}"
		></u-modal>
		
	</view>
</template>

<script>
	import permision from "@/js_sdk/wa-permission/permission.js"
	import http from '@/utils/https.js'
	var timestamp = Date.parse(new Date()) / 1000
	import md5 from 'js-md5'
	let Base64 = require('js-base64').Base64
	export default {
		data() {
			return {
				id: 0,

				flag: true,
				
				time:0,
				
				show:false,
				
				timer:null,
				
				recorderManager:null
			}
		},
		methods: {
			createSign() {
				timestamp = Date.parse(new Date()) / 1000
				let last_num = timestamp.toString().slice(-1)
				if (last_num <= 3) {
					last_num = 3;
				} else if (last_num > 3 && last_num <= 6) {
					last_num = 6;
				} else if (last_num > 6 && last_num <= 9) {
					last_num = 9;
				} else {
					last_num = 0;
				}
				let new_str = timestamp.toString().slice(0, 9)
				let md5_str = md5(new_str);
				let str_split = md5_str.split('')
				let new_str_split = str_split.sort()
				return Base64.encode(new_str_split.join("") + '&time=' + timestamp);
			},
			goback(){
				this.$util.modal('退出后将中断录音，请确保服务已结束',()=>{
					uni.redirectTo({
						url: '/technician/index/index'
					})
				},'',false)
			},
			start() {
				this.recorderManager.start({
					duration: 60000,
					sampleRate: 44100,
					format: 'mp3'
				})
			},
			stop(e) {
				let that = this
				if (that.flag) {
					that.start()
					uni.uploadFile({
						url: http.baseUrl + '/upload/permanentAudio',
						filePath: e.tempFilePath,
						name: 'file',
						header: {
							token: uni.getStorageSync('token'),
							'sign': this.createSign()
						},
						formData: {
							order_id: that.id,
						},
						success: res => {
							if (JSON.parse(res.data).code == 0) {
							} else {
								that.$util.msg(JSON.parse(res.data).msg)
							}
						}
					})
				} else {
					
					uni.uploadFile({
						url: http.baseUrl + '/upload/permanentAudio',
						filePath: e.tempFilePath,
						name: 'file',
						header: {
							token: uni.getStorageSync('token'),
							'sign': this.createSign()
						},
						formData: {
							order_id: that.id,
						},
						success: res => {
							if (JSON.parse(res.data).code == 0) {
								this.request.httpTokenRequest({
									url: "/technician.order/setOrderStatus",
									method: "post"
								}, {
									order_id:this.id,
									status:4
								}).then(res => {
									if (res.code == 0) {
										uni.redirectTo({
											url:'/technician/index/index'
										})
									} else {
										this.$util.msg(res.msg)
									}
								}, error => {})
							} else {
								that.$util.msg(JSON.parse(res.data).msg)
							}
						}
					})
				}

			},
			confirm(){
				this.flag = false
				this.recorderManager.stop()
				clearInterval(this.timer)
			},
			stopRecord() {
				this.show = true
			},
			timers(timer){
				let hours = parseInt((timer / 1000 / 60 / 60 % 24));  //时
				let minutes = parseInt((timer / 1000 / 60 % 60));  //分
				let seconds = parseInt((timer / 1000 % 60));  //秒
				let str = `${hours<10 ? '0'+hours : hours}:${minutes<10 ? '0'+minutes : minutes}:${seconds<10 ? '0'+seconds : seconds}`
				return str;
			}
		},
		onBackPress(option) {
			if(option.from == 'backbutton'){
				this.$util.modal('退出后将中断录音，请确保服务已结束',()=>{
					uni.redirectTo({
						url: '/technician/index/index'
					})
				},'',false)
				return true; // 此处返回 true 表示阻止页面跳转或关闭
			}
		},
		onLoad(option) {
			this.id = option.id
			let that = this
			this.recorderManager = uni.getRecorderManager()
			if(uni.getStorageSync('osName') == 'ios'){
				permision.judgeIosPermission("record").then(res=>{
					if(res){
						that.id = option.id
						that.start()
						this.recorderManager.onStop(function (res) {
							that.stop(res)
						});
						that.timer = setInterval(()=>{
							that.time+=1000
						},1000)
					}
				})
				.catch(error=>{
					that.$util.modal('需要录音权限才可以进行录音功能',()=>{
						uni.navigateTo({
							url:'/otherpages/authorize/authorize'
						})
					},'',true)
				})
			}else {
				if(uni.getStorageSync('RECORD_AUDIO')){
					that.$util.authorize('android.permission.RECORD_AUDIO').then(res => {
						if(res == 1){
							that.start()
							this.recorderManager.onStop(function (res) {
								that.stop(res)
							});
							that.timer = setInterval(()=>{
								that.time+=1000
							},1000)
						}else {
							that.$util.modal('需要录音权限才可以进行录音功能',()=>{
								uni.navigateTo({
									url:'/otherpages/authorize/authorize'
								})
							},'',true)
						}
					})
				}else {
					that.$util.modal('将获取您的麦克风权限，实现录音功能',()=>{
						uni.setStorageSync('RECORD_AUDIO', true)
						that.$util.authorize('android.permission.RECORD_AUDIO').then(res => {
							if(res == 1){
								that.start()
								this.recorderManager.onStop(function (res) {
									that.stop(res)
								});
								that.timer = setInterval(()=>{
									that.time+=1000
								},1000)
							}else {
								that.$util.modal('需要录音权限才可以进行录音功能',()=>{
									uni.navigateTo({
										url:'/otherpages/authorize/authorize'
									})
								},'',true)
							}
						})
					})
				}
			}
			
			
			
		},
		onUnload() {
			this.recorderManager.stop()
			this.recorderManager = null
			clearInterval(this.timer)
		}
	}
</script>

<style lang="scss" scoped>
	.nav {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 99;
		background: #F5F7F8;
		padding-top: var(--status-bar-height);
	}
	
	.detail {
		min-height: 100vh;
		box-sizing: border-box;
		padding: calc(var(--status-bar-height) + 70px) 0 20rpx;
	}
	
	.canvas {
		background: #FFF;
		height: 400rpx;
		width: 100vw;

		.prompt-loader .em {}

		/* 语音音阶------------- */
		.prompt-loader {
			width: 60vw;
			height: 200rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 6px;
		}

		.prompt-loader .em {
			display: block;
			background: #3F90FF;
			width: 1rpx;
			height: 10%;
			margin-right: 2.5px;
			float: left;
			border: 1rpx solid #9FC8FF;
		}

		.prompt-loader .em:last-child {
			margin-right: 0px;
		}

		.prompt-loader .em:nth-child(1) {
			animation: load 1.5s 1.4s infinite linear;
		}

		.prompt-loader .em:nth-child(2) {
			animation: load 1.5s 1.2s infinite linear;
		}

		.prompt-loader .em:nth-child(3) {
			animation: load 1.5s 1s infinite linear;
		}

		.prompt-loader .em:nth-child(4) {
			animation: load 1.5s 0.8s infinite linear;
		}

		.prompt-loader .em:nth-child(5) {
			animation: load 1.5s 0.6s infinite linear;
		}

		.prompt-loader .em:nth-child(6) {
			animation: load 1.5s 0.4s infinite linear;
		}

		.prompt-loader .em:nth-child(7) {
			animation: load 1.5s 0.2s infinite linear;
		}

		.prompt-loader .em:nth-child(8) {
			animation: load 1.5s 0s infinite linear;
		}

		.prompt-loader .em:nth-child(9) {
			animation: load 1.5s 0.2s infinite linear;
		}

		.prompt-loader .em:nth-child(10) {
			animation: load 1.5s 0.4s infinite linear;
		}

		.prompt-loader .em:nth-child(11) {
			animation: load 1.5s 0.6s infinite linear;
		}

		.prompt-loader .em:nth-child(12) {
			animation: load 1.5s 0.8s infinite linear;
		}

		.prompt-loader .em:nth-child(13) {
			animation: load 1.5s 1s infinite linear;
		}

		.prompt-loader .em:nth-child(14) {
			animation: load 1.5s 1.2s infinite linear;
		}

		.prompt-loader .em:nth-child(15) {
			animation: load 1.5s 1.4s infinite linear;
		}

		@keyframes load {
			0% {
				height: 10%;
			}

			50% {
				height: 100%;
			}

			100% {
				height: 10%;
			}
		}
	}

	.player {
		width: 388rpx;
		height: 223rpx;
		background: url('https://qiniu-cdn.maeiyun.com/imgs/technician/index/radio_bg.png') 0 0 no-repeat;
		background-size: 100%;
		position: relative;
		margin: 30rpx auto;

		.player_icon {
			width: 156rpx;
			height: 156rpx;
			animation: playerRotate 6s infinite linear;

			image {
				width: 100%;
				height: 100%;
			}
		}

		@keyframes playerRotate {
			0% {
				transform: rotate(0);
			}

			100% {
				transform: rotate(360deg);
			}
		}

		.player_icon:nth-child(1) {
			position: absolute;
			left: -27rpx;
			top: -66rpx;
		}

		.player_icon:nth-child(2) {
			position: absolute;
			right: -27rpx;
			top: -66rpx;
		}
		
		.text {
			font-size: 36rpx;
			color: #232323;
			line-height: 50rpx;
			position: absolute;
			bottom: 8rpx;
			left: 50%;
			transform: translateX(-50%);
		}
	}

	.btn {
		margin-top: 137rpx;
		image {
			width: 87rpx;
			height: 86rpx;
		}
		text {
			font-size: 30rpx;
			color: #232323;
			line-height: 42rpx;
			margin-top: 23rpx;
		}
	}
</style>